<template>
	<view class="bugs">
		<view class="list">
			<view class="title" style="margin-bottom: 20rpx;">
				反馈类型 <text>*</text>
			</view>
			<view class="li" :style="formData.type==item.label?'background:#f77a28;color:#fff;':'' "
				v-for="(item,index) in types" :key="index" @click="changeType(item)">
				{{item.label}}
			</view>
		</view>
		<view class="content">
			<view class="title" style="margin-bottom: 20rpx;">
				反馈内容 <text>*</text>
			</view>
			<textarea placeholder="请写下您的投诉或建议" placeholder-style="font-size:24rpx;" :maxlength="200"
				v-model="formData.content"></textarea>
		</view>
		<view class="upload">
			<view class="title">
				上传图片 （0/8）
			</view>
			<view class="imgTotal">
				<view class="imgli" v-for="(item,index) in totalImg" :key="index">
					<image class="close" src="@/static/img/upload-ico.png" @click="onDel(index)"></image>
					<image class="img" :src="item"></image>
				</view>
				<view class="imgbox" @click="chooseImgs" v-if="totalImg.length<8"></view>
			</view>
		</view>
		<view class="tel row">
			<view class="title">
				手机号码 <text>*</text>
			</view>
			<input type="number" maxlength="11" v-model="formData.mobile" />
		</view>
		<view class="btn" @click="submit">
			确认提交
		</view>
	</view>
</template>

<script>
	import {
		feedbackSubmit
	} from '../../apirequest/api.js';
	import {
		baseUrl
	} from '../../apirequest/config.js'
	export default {
		data() {
			return {
				formData: {
					mobile: '',
					content: '',
					images: '',
					type: ''
				},
				types: [{
					label: '外卖订单'
				}, {
					label: 'suggest'
				}, {
					label: '商家问题'
				}, {
					label: '商城订单'
				}, {
					label: '售后服务'
				}, {
					label: '活动相关'
				}, {
					label: '程序bug'
				}, {
					label: '建议'
				}, {
					label: '其他'
				}],
				totalImg: [],
				content: '',
				mobile: '',
				lock: 0,
			}
		},
		methods: {
			submit() {
				const {
					type,
					content,
					mobile
				} = this.formData
				const regExp = /^1[3456789]\d{9}$/;
				if (!type) {
					uni.showToast({
						title: '请选择反馈类型',
						icon: 'none'
					})
					return false
				}
				if (!content) {
					uni.showToast({
						title: '请填写反馈内容',
						icon: 'none'
					})
					return false
				}
				if (!mobile) {
					uni.showToast({
						title: '请填写手机号码',
						icon: 'none'
					})
					return false
				}
				if (!regExp.test(mobile)) {
					uni.showToast({
						title: '手机号码格式错误',
						icon: 'none'
					})
					return false
				}
				feedbackSubmit({
					...this.formData,
					images: this.totalImg.join(',')
				}).then(res => {
					if (res.code == 1) {
						this.formData = {
							content: "",
							type: '',
							mobile: ''
						}
						this.totalImg = []
						uni.showToast({
							title: '反馈成功！',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				})

			},
			onDel(index) {
				this.totalImg.splice(index, 1)
			},
			changeType(item) {
				this.formData.type = item.label
			},
			// 选择图片
			chooseImgs: function() {
				const _this = this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0]
						try {
							_this.$upload(tempFilePaths).then(res => {
								this.totalImg.push(res)
							})
						} catch (e) {
							uni.showToast({
								title: '上传失败~',
								icon: 'none'
							});
						}
					}
				})
			},
			//图片预览
			previewImage: function(index) {
				var _this = this
				//所有图片
				var imgbox = _this.totalImg;
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			deleteImg: function(index) {
				var _this = this
				_this.totalImg.splice(index, 1)
			},
			backSubmit: function() {
				var e = this;
				if (e.lock) return;
				let adds = {
					content: e.content,
					mobile: e.mobile,
					images: '',
					type: 'bug'
				}
				if (!e.content) {
					uni.showToast({
						title: '请描述您要反馈的BUG问题',
						icon: 'error'
					})
					return false;
				}
				if (!adds.mobile) {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'error'
					})
					return false;
				}
				console.log(adds);
				var _submit = function(data) {
					feedbackSubmit(adds).then((res) => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: "success"
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 0
								});
							}, 1000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error"
							});
							e.lock = 0;
						}
					}).catch(err => {
						console.log(err)
					})
				};
				let index = 0;
				let img_num = e.totalImg.length
				let imgs = []
				var upload_image = function(filePath, img_arr) {
					uni.showLoading({
						title: "正在上传图片",
						mask: !0
					}), uni.uploadFile({
						url: baseUrl + 'common/upload',
						filePath: filePath,
						name: 'file',
						header: {
							//'content-type': 'multipart/form-data',
							"token": uni.getStorageSync('token')
						},
						success: function(data) {
							console.log(data)
							uni.hideLoading({
								complete: (res) => {},
							})
							var img_res = JSON.parse(data.data)
							console.log(img_res)
							if (img_res.code == 1) {
								img_arr.push(img_res.data.url);
								index++;
								console.log(index + '----' + img_num)
								if (index == img_num) {
									adds.images = imgs.join(",");
									console.log(adds);
									_submit(adds)
								}
							} else {
								e.lock = 0;
								uni.showToast({
									title: img_res.msg,
									icon: 'none'
								});
							}
						}
					})
				}
				if (!img_num) {
					e.lock = 1;
					_submit(adds);
				} else {
					if (e.totalImg.length) {
						e.lock = 1;
						console.log(e.totalImg)
						for (var i = 0; i < img_num; i++) {
							console.log(i)
							console.log(e.totalImg[i])
							upload_image(e.totalImg[i], imgs);
						}
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.bugs {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;
		padding-bottom: 50rpx;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			font-family: PingFang-SC-Bold;


			text {
				color: red;
			}
		}

		.tel,
		.content,
		.list,
		.upload {
			width: 710rpx;
			padding: 20rpx 20rpx 0;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			margin: 20rpx;

			textarea {
				width: 100%;
				height: 200rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				background-color: #f5f5f5;
			}

			.li {
				display: inline-block;
				width: 32%;
				height: 50rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				line-height: 50rpx;
				color: #666;
				background-color: #f8f8f8;
				text-align: center;
				margin-bottom: 20rpx;
				margin-right: 2%;

				&:nth-child(3n+1) {
					margin-right: 0;
				}
			}

			.imgTotal {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.imgli {
					margin-right: 35rpx;
					position: relative;

					.img {
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin-top: 20rpx;
					}

					.close {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						transform: rotate(45deg);
						position: absolute;
						right: -10rpx;
						top: -10rpx;
						background-color: #000;
					}

					&:nth-child(3n) {
						margin-right: 0;
					}
				}



			}

			.imgbox {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				background-color: #dbdbdb;
				position: relative;
				margin-top: 20rpx;

				&::before,
				&::after {
					width: 50%;
					height: 10rpx;
					border-radius: 20rpx;
					background-color: #fff;
					content: '';
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				&::after {
					width: 10rpx;
					height: 50%;
				}
			}
		}

		.content,
		.tel,
		.upload {
			padding: 20rpx;
		}

		.tel {
			display: flex;
			align-items: center;

			input {
				flex: 1;
				text-align: right;
			}
		}

		.btn {
			width: 614rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			border-radius: 40rpx;
			margin: 50rpx auto 100rpx;
			background-color: #f77a28;
			color: #fff;
			font-size: 32rpx;

		}
	}
</style>